<template>
  <a-card :bordered="false">
    <a-spin :spinning="confirmLoading">
      <div style="display:flex;width: 100%;">
        <div style="width:90%;">
          <h2>运维企业信息</h2>
        </div>
        <div v-if="btn" class="ok">
          <a-button @click="edit1()" type="primary">修改</a-button>
        </div>
        <div v-if="!btn" style="display:flex" class="ok">
          <a-button @click="submitForm()" type="primary">保存</a-button>
          <a-button style="margin-left:10%" @click="edit1()" type="primary">取消</a-button>
        </div>
      </div>
      <j-form-container :disabled="btn">
        <a-form :form="form" slot="detail">
          <a-row>
            <a-col :span="24">
              <a-form-item label="公司名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['companyName']" placeholder="请输入公司名称"  ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="负责人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['companyHead']" placeholder="请输入负责人"  ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="联系方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input-number v-decorator="['phoneNumber']" placeholder="请输入联系方式" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="所在城市" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['companyCity']" placeholder="请输入所在城市"  ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="详细地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['detailAddress']" placeholder="请输入详细地址"  ></a-input>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </j-form-container>
    </a-spin>
  </a-card>
</template>

<script>


  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import DevCompanyModal from './modules/DevCompanyModal'
  import pick from "lodash.pick";
  import { httpAction, getAction } from '@/api/manage'


    export default {
      name: 'DevCompanyForm',
      components: {
      },
      props: {
        //流程表单data
        formData: {
          type: Object,
          default: ()=>{},
          required: false
        },
        //表单模式：true流程表单 false普通表单
        formBpm: {
          type: Boolean,
          default: false,
          required: false
        },
        //表单禁用
        disabled: {
          type: Boolean,
          default: false,
          required: false
        }
      },
    data () {
      return {
        form: this.$form.createForm(this),
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        url: {
          list: "/DevComoany/devCompany/company",
          edit: "/DevComoany/devCompany/edit",
          queryById: "/DevComoany/devCompany/queryById"
        },
        confirmLoading: false,
        validatorRules: {
        },
        btn: true,
        DevCompany: {},
      }
    },

      computed: {
        formDisabled(){
          if(this.formBpm===true){
            if(this.formData.disabled===false){
              return false
            }
            return true
          }
          return this.disabled
        },
        showFlowSubmitButton(){
          if(this.formBpm===true){
            if(this.formData.disabled===false){
              return true
            }
          }
          return false
        }
      },
    created() {
      this.showFlowData();
      this.list();
    },
      methods: {

        list() {
          getAction(this.url.list).then((res) => {
            if (res.success) {
              this.DevCompany = res.result;
              this.popupCallback(this.DevCompany);
            }
          });
        },

        popupCallback(row){
          this.form.setFieldsValue(pick(row,'companyName','companyHead','phoneNumber','companyCity','detailAddress'))
        },

        edit (record) {
          this.form.resetFields();
          this.model = Object.assign({}, record);
          this.visible = true;
          this.$nextTick(() => {
            this.form.setFieldsValue(pick(this.model,'companyName','companyHead','phoneNumber','companyCity','detailAddress'))
          })
        },
        //渲染流程表单数据
        showFlowData(){
          if(this.formBpm === true){
            let params = {id:this.formData.dataId};
            getAction(this.url.queryById,params).then((res)=>{
              if(res.success){
                this.edit (res.result);
              }
            });
          }
        },

        edit1() {
          this.btn = !this.btn;
        },

        submitForm () {
          const that = this;
          // 触发表单验证
          this.form.validateFields((err, values) => {
            if (!err) {
              that.confirmLoading = true;
              let httpurl = '';
              let method = '';
             /* if(!this.model.id){
                httpurl+=this.url.add;
                method = 'post';
              }else{*/
              this.model.id = this.DevCompany.id;
              this.model.createBy = this.DevCompany.createBy;
              this.model.createTime = this.DevCompany.createTime;
              this.model.updateBy = this.DevCompany.updateBy;
              this.model.updateTime = this.DevCompany.updateTime;
              this.model.sysOrgCode = this.DevCompany.sysOrgCode;
                httpurl+=this.url.edit;
                method = 'put';
              // }
              let formData = Object.assign(this.model, values);
              console.log("表单提交数据",formData)
              httpAction(httpurl,formData,method).then((res)=>{
                if(res.success){
                  that.$message.success(res.message);
                  that.$emit('ok');
                }else{
                  that.$message.warning(res.message);
                }
              }).finally(() => {
                that.confirmLoading = false;
              })
            }

          })
        },
      }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>